<!DOCTYPE HTML>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="webpack,easywebpack,webpack react,webpack vue,webpack weex,webpack-dev-server,基于 Webpack 前端工程构建方案-easywebpack 前端工程化构建方案, 前端工程化, node, egg, webpack, easywebpack, ves, res, ssr, react server side render, vue server side render">
    <meta name="description" content="基于 Webpack 前端工程构建方案,基于 Webpack 前端工程构建方案-easywebpack 前端工程化构建方案 | easy-team">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>基于 Webpack 前端工程构建方案-easywebpack 前端工程化构建方案 | easy-team</title>
    <link rel="icon" type="image/png" href="/favicon.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery-2.2.0.min.js"></script>
    <script src="/libs/materialize/materialize.min.js"></script>
    <script src="/libs/materialize/materialize.min.js"></script>
    <script src="/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/libs/aos/aos.js"></script>
    <script src="/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>


<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper head-container">
            <div class="brand-logo">
                <a href="/" class="waves-effect waves-light">
                    
                    <img src="/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">easy-team</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>Home</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/res" class="waves-effect waves-light">
      
      <i class="fas fa-forward" style="zoom: 0.6;"></i>
      
      <span>Res</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/ves" class="waves-effect waves-light">
      
      <i class="fas fa-forward" style="zoom: 0.6;"></i>
      
      <span>Ves</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="" class="waves-effect waves-light">

      
      <i class="fas fa-list" style="zoom: 0.6;"></i>
      
      <span>Egg</span>
      <i class="fas fa-chevron-down" aria-hidden="true" style="zoom: 0.6;"></i>
    </a>
    <ul class="sub-nav menus_item_child ">
      
      <li>
        <a href="/egg-react">
          
          <i class="fas fa-forward" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>Egg+React</span>
        </a>
      </li>
      
      <li>
        <a href="/egg-vue">
          
          <i class="fas fa-forward" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>Egg+Vue</span>
        </a>
      </li>
      
    </ul>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/easywebpack" class="waves-effect waves-light">
      
      <i class="fas fa-building" style="zoom: 0.6;"></i>
      
      <span>Webpack</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog" class="waves-effect waves-light">
      
      <i class="fas fa-hacker-news" style="zoom: 0.6;"></i>
      
      <span>Blog</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>About</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/contact" class="waves-effect waves-light">
      
      <i class="fas fa-comments" style="zoom: 0.6;"></i>
      
      <span>Contact</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="Search" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>

<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">easy-team</div>
        <div class="logo-desc">
            
            Node, 前端工程化, 多端技术
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			Home
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/res" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-forward"></i>
			
			Res
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/ves" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-forward"></i>
			
			Ves
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="javascript:;">
			
				<i class="fa-fw fas fa-list"></i>
			
			Egg
			<span class="m-icon"><i class="fas fa-chevron-right"></i></span>
		</a>
            <ul  style="background:  ;" >
              
                <li>   
				
                  <a href="/egg-react " style="margin-left:75px";>
				  
				   <i class="fa fas fa-forward" style="position: absolute;left:50px" ></i>
			      
		          <span>Egg+React</span>
                  </a>
                </li>
              
                <li>   
				
                  <a href="/egg-vue " style="margin-left:75px";>
				  
				   <i class="fa fas fa-forward" style="position: absolute;left:50px" ></i>
			      
		          <span>Egg+Vue</span>
                  </a>
                </li>
               
            </ul>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/easywebpack" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-building"></i>
			
			Webpack
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-hacker-news"></i>
			
			Blog
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			About
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/contact" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-comments"></i>
			
			Contact
		</a>
          
        </li>
        
        
        <li><div class="divider"></div></li>
        <li>
            <a href="https://github.com/easy-team" class="waves-effect waves-light" target="_blank">
                <i class="fab fa-github-square fa-fw"></i>Fork Me
            </a>
        </li>
        
    </ul>
</div>


        </div>

        
            <style>
    .nav-transparent .github-corner {
        display: none !important;
    }

    .github-corner {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        border: 0;
        transform: scale(1.1);
    }

    .github-corner svg {
        color: #0f9d58;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

    .github-corner:hover .octo-arm {
        animation: a 0.56s ease-in-out;
    }

    .github-corner .octo-arm {
        animation: none;
    }

    @keyframes a {
        0%,
        to {
            transform: rotate(0);
        }
        20%,
        60% {
            transform: rotate(-25deg);
        }
        40%,
        80% {
            transform: rotate(10deg);
        }
    }
</style>

<a href="https://github.com/easy-team" class="github-corner tooltipped hide-on-med-and-down" target="_blank"
   data-tooltip="Fork Me" data-position="left" data-delay="50">
    <svg viewBox="0 0 250 250" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
              fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
              fill="currentColor" class="octo-body"></path>
    </svg>
</a>
        
    </nav>

</header>

    
<style>
    .carousel-control {
        width: 45px;
        height: 45px;
        line-height: 55px;
        border-radius: 45px;
        background: transparent;
        cursor: pointer;
        z-index: 100;
    }

    .carousel-control:hover {
        background-color:rgba(0, 0, 0, .4);
    }

    .carousel-control i {
        color: #fff;
        font-size: 2.4rem;
    }
    
    html, body {
        height:100%;
    }

    #page {
        height:500px;
        min-height: 500px;
        width:100%;
    }
</style>

<div id="page" class="carousel carousel-slider center index-cover" data-indicators="true" style="margin-top: -64px;">

    <div class="carousel-item red white-text bg-cover about-cover" 
        style="background-image: url('/medias/featureimages/4.jpg');">
        <div class="container" style="right: 0px;left: 0px;">
            <div class="row">
                <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                    <div class="brand">
                        <div class="title main-title center-align">
                            easywebpack
                        </div>
                        <div class="description center-align">
                            基于 Webpack 前端工程构建方案
                        </div>
                    </div>
                </div>
            </div>

            <div class="cover-btns" style="top: 4vh">
                <a href="/easywebpack/index/" class="waves-effect waves-light btn">
                    <i class="fas fa-angle-double-down"></i>Start
                </a>

                <a href="https://github.com/easy-team/easywebpack" class="waves-effect waves-light btn" target="_blank">
                        <i class="fab fa-github-alt"></i>Github
                </a>
            </div>
            <div class="cover-social-link" style="top: 10vh">
    <a href="https://github.com/hubcarl" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:hubcarl@126.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=433207205" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 433207205" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>



    <a href="https://weibo.com/hubcarl" class="tooltipped" target="_blank" data-tooltip="关注我的微博: https://weibo.com/hubcarl" data-position="top" data-delay="50">
        <i class="fab fa-weibo"></i>
    </a>



    <a href="https://zhuanlan.zhihu.com/easywebpack" class="tooltipped" target="_blank" data-tooltip="关注我的知乎: https://zhuanlan.zhihu.com/easywebpack" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">知</i>
    </a>



    <a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>

</div>
        </div>
    </div>
</div>

<script>
$(function () {
    var coverSlider = $('.carousel');
    if (coverSlider) {
        coverSlider.carousel({
            duration: Number('120'),
            fullWidth: true,
            indicators: 'true' === 'true'
        });
    } 
});
</script>

    
<main class="content">
    <div id="indexCard" class="index-card">
        <div class="container ">
            <div class="card">
                <div class="card-content">
                    <!-- 

                     -->

                    <div id="recommend-sections" class="recommend">
                        




<div class="title"><i class="far fa-thumbs-up"></i>&nbsp;&nbsp;Recommended Reading</div>
<div class="row">

    
    
    <div class="col s12" >
        <div class="post-card" style="background-image: url('/medias/featureimages/9.jpg')">
            <div class="post-body">
                
                <a href="/easywebpack/index">
                    <h3 class="post-title">方案介绍</h3>
                </a>
                <p class="post-description">easywebpack 是什么easywebpack 是基于 webpack 的前端工程化解决方案。旨在解决 webpack 项目构建复杂,使用成本高,复用低,维护成本高等工程效率问题。基于 easywebpack 工程化方案, 你能非常简单容易的对各种前端项目进行工程化建设，及时享受最新的特...</p>
                <a href="/easywebpack/index" class="read-more btn waves-effect waves-light" style="background: linear-gradient(to right, #FF5E3A 0%, #FF2A68 100%)" target="_blank">
                    <i class="icon far fa-eye fa-fw"></i>Read more
                </a>
            </div>
        </div>
    </div>
    
    
    <div class="col s12 m6" data-aos="zoom-in-up">
        <div class="post-card" style="background-image: url('/medias/featureimages/7.jpg')">
            <div class="post-body">
                
                <a href="/easywebpack/about">
                    <h3 class="post-title">项目实战</h3>
                </a>
                <p class="post-description">快速开始我们可以使用基于 easywebpack 前端工程化解决方案构建的脚手架 easywebpack-cli 初始化各种项目, 目前支持如下骨架项目:multiple-html-boilerplate 纯静态 Webpack + HTML + 页面构建项目骨架vue-client-rend...</p>
                <a href="/easywebpack/about" class="read-more btn waves-effect waves-light" style="background: linear-gradient(to right, #EF4DB6 0%, #C643FC 100%)" target="_blank">
                    <i class="icon far fa-eye fa-fw"></i>Read more
                </a>
            </div>
        </div>
    </div>
    
    
    <div class="col s12 m6" data-aos="zoom-in-up">
        <div class="post-card" style="background-image: url('/medias/featureimages/19.jpg')">
            <div class="post-body">
                
                <a href="/easywebpack/problem">
                    <h3 class="post-title">常见问题</h3>
                </a>
                <p class="post-description">Babel 快速升级问题为了更方便升级 Babel7, 同时尽量减少配置且无需安装 @babel 依赖，@easy-team 模式直接内置Babel 7 的相关依赖，只需要把 easywebpack 依赖模式改成 @easy-team/easywebpack 模式，如果代码中直接依赖了也请一并...</p>
                <a href="/easywebpack/problem" class="read-more btn waves-effect waves-light" style="background: linear-gradient(to right, #1AD6FD 0%, #1D62F0 100%)" target="_blank">
                    <i class="icon far fa-eye fa-fw"></i>Read more
                </a>
            </div>
        </div>
    </div>
    

</div>


                    </div>
                </div>
            </div>
        </div>
    </div>

    

    <!-- 所有文章卡片 -->
    <article id="articles" class="container articles">
        <div class="row article-row">
            
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/index">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/2.jpg" class="responsive-img" alt="总体介绍">
                            
                            <span class="card-title">总体介绍</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack 是什么easywebpack 是基于 webpack 的前端工程化解决方案。旨在解决 webpack 项目构建复杂,使用成本高,复用低,维护成本高等工程效率问题。基于 easywebpack 工程化方案, 你能非常简单容易的对各种前端项目进行工程化建设，及时享受最新的特...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/native">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/7.jpg" class="responsive-img" alt="快速开始">
                            
                            <span class="card-title">快速开始</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack 获取原生 Webpack 配置easywebpack.getWebpackConfig(config)  这种获取方式是指通过解决方案获取配置, 参数 config 支持如下三种配置: config 为 null 或 undefined 时, 目前读取项目根目录下的 w...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/about">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/7.jpg" class="responsive-img" alt="项目实战">
                            
                            <span class="card-title">项目实战</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                快速开始我们可以使用基于 easywebpack 前端工程化解决方案构建的脚手架 easywebpack-cli 初始化各种项目, 目前支持如下骨架项目:multiple-html-boilerplate 纯静态 Webpack + HTML + 页面构建项目骨架vue-client-rend...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/problem">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/19.jpg" class="responsive-img" alt="常见问题">
                            
                            <span class="card-title">常见问题</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                Babel 快速升级问题为了更方便升级 Babel7, 同时尽量减少配置且无需安装 @babel 依赖，@easy-team 模式直接内置Babel 7 的相关依赖，只需要把 easywebpack 依赖模式改成 @easy-team/easywebpack 模式，如果代码中直接依赖了也请一并...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/config">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/12.jpg" class="responsive-img" alt="webpack.config.js">
                            
                            <span class="card-title">webpack.config.js</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                webpack.config.js// ${app_root}/webpack.config.js module.exports = {   // framework 支持 `js`,`html`, `vue`, `react`, `weex`   framework: 'html'    e...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/entry">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/10.jpg" class="responsive-img" alt="entry">
                            
                            <span class="card-title">entry</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                entry 基本配置config.entry : {String|Object}  Webpack 构建入口文件配置这里的entry 对 Webpack 的 entry 进行了增强， 除了支持 webpack 原生 Object(key:value) 方式配置， 还对entry进行了增强。We...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/loader">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/0.jpg" class="responsive-img" alt="loaders">
                            
                            <span class="card-title">loaders</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                v3 代表 easywebpack 3.x.x, v4 代表 easywebpack 4.x.x内置配置 loaderseasywebpack 内置了 babel, eslint, css, sass, less, stylus, urlimage, urlfont 等loader,easyw...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/plugin">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/16.jpg" class="responsive-img" alt="plugins">
                            
                            <span class="card-title">plugins</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                内置pluginplugin别名默认是否开启/开启环境npm-install-webpack-pluginnpm否webpack.DefinePlugindefine是webpack.NamedModulesPluginnameModule是/devwebpack.HashedModuleId...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/ed847g">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/8.jpg" class="responsive-img" alt="devServer">
                            
                            <span class="card-title">devServer</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                开发服务    easywebpack 整个体系提供的开发构建服务是基于 koa 实现的，用于支持各种类型项目(服务端渲染，前端渲染，静态页面，本地内存编译等)，实现了 内存编译，热更新，发布编译，代理，historyApiFallback等功能，其中代理和historyApiFallback...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/optimizaiton">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/13.jpg" class="responsive-img" alt="optimizaiton">
                            
                            <span class="card-title">optimizaiton</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化，你可以通过 optimizaiton  节点进行覆盖配置。在 easywebpack  体系中，会进行进步配置简化。easywebpack 默认配置请根据需要，覆盖默认配置runtimeChunk 默认文件名为 runt...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/build">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/17.jpg" class="responsive-img" alt="deploy">
                            
                            <span class="card-title">deploy</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                打包配置支持 webpack.config.js 文件配置 和 &nbsp;easyweback-cli 模式, &nbsp;easywebpack-cli@4.3.2 开始支持。注意打部署包时, 如果把 node 和 alinode 打进依赖包里面，请保证打包机器操作系统与线上运行的操作系统...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/base">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/5.jpg" class="responsive-img" alt="扩展配置">
                            
                            <span class="card-title">扩展配置</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                webpack.config.js 常用配置1. Egg框架配置  (扩展简化配置)config.egg : {Boolean} 特殊参数,  Egg SSR 构建时使用。easywebpack 4.8.0 无需配置，已支持自动检测使用条件:只有在使用 Egg 框架进行 Server Side...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/ayrtv3">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/12.jpg" class="responsive-img" alt="构建模式">
                            
                            <span class="card-title">构建模式</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack-cli 支持两种开发构建模式： easywebpack 增强模式 和 原生 webpack 模式， 同时在最新相关解决方案中，该文件非必须，也就是可以零配置。easywebpack 增强模式（默认）easywebpack 增强模式时，  webpack.config.j...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/debug">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/3.jpg" class="responsive-img" alt="开发调试">
                            
                            <span class="card-title">开发调试</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                当我们使用 easywebpack 时， 遇到构建问题时，我们可以通过 easywebpack-cli 的  easy print 命令检查一下生成的 webpack config 配置是否正确。默认读取项目根目录下的 webpack.config.js 配置, 你可以通过 -f  参数指定指...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/hot">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/9.jpg" class="responsive-img" alt="热更新">
                            
                            <span class="card-title">热更新</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack 是通过 koa-webpack-hot-middleware 和 koa-webpack-dev-middleware 插件实现热更新机制。具体实现封装成独立 webpack-tool 插件，该插件除了集成在 easywebpack 里面，同时也可以单独使用。下面详细说...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/css">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/20.jpg" class="responsive-img" alt="Css Style">
                            
                            <span class="card-title">Css Style</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                开启 Sass （默认禁用）webpack.config.js// ${app_root}/webpack.config.js module.exports = {   module:{      rules:[        {          scss: true        }   ...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/postcss">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/3.jpg" class="responsive-img" alt="PostCss">
                            
                            <span class="card-title">PostCss</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                默认配置// postcss.config.js module.exports = {   plugins: [     require('autoprefixer')({ overrideBrowserslist: ['iOS &gt;= 7', 'Android &gt;= 4.0'] }...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/proxy">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/9.jpg" class="responsive-img" alt="域名代理">
                            
                            <span class="card-title">域名代理</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                本地开发域名代理构建支持前提：代理域名能够映射到本机ip地址的功能需要你自己在电脑上面配置。如果是实际的存在的域名，理论上面就不需要自己配置域名映射。该功能只在 Egg 应用构建本地开发使用。在 Egg SSR 应用开发时，Egg 应用的访问地址， 静态资源构建的地址， HMR 地址都是 ip...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/var">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/15.jpg" class="responsive-img" alt="全局常量">
                            
                            <span class="card-title">全局常量</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack 内置全局常量easywebpack 通过 webpack.DefinePlugin webpack 插件内置了如下全局常量, 方便业务使用。process.env.NODE_ENV首先会获取用户 process.env.NODE_ENV 值, 如果获取不到，当构建 pr...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/deps">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/5.jpg" class="responsive-img" alt="资源依赖">
                            
                            <span class="card-title">资源依赖</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack 静态资源 manifest 文件easywebpack 3.5.0 新增自定义插件 webpack-manifest-resource-plugin 替换 webpack-manifest-plugin。 之前的 manifest 依赖关系是在 Egg 运行期间解析的，...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/common">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/3.jpg" class="responsive-img" alt="公共提取">
                            
                            <span class="card-title">公共提取</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                Webpack CommonsChunk 公共代码提取easywebpack 4.10.0 开始，底层通过 optimization 实现公共提取，支持公共 js 和 css  提取, 提取的公共 chunk 文件名默认为 common .   默认是提取的是 node_modules 下依赖...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/speed">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/1.jpg" class="responsive-img" alt="极速编译">
                            
                            <span class="card-title">极速编译</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                DLL 公共提取Webpack 通过 DLLPlugin 和 DLLReferencePlugin 可以实现公共类库的单独提取，能极大大提升了构建的速度.只需要在 webpack.config.js 文件添加 dll 节点配置即可完成 dll 整个流程。module.exports = {   dll:[&#x27;vue&#x27;,&#x27;vuex&#x27;,&#x27;axios&#x27;] } 详细方案：Webpack DLL 工程化实现开启 cache-loader...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/dll">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/18.jpg" class="responsive-img" alt="DLL 构建">
                            
                            <span class="card-title">DLL 构建</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                Webpack Dll 构建在 3.5.0 版本之前，webpack 构建随着项目越来越来大，打包也就越来越慢; 同时 dll 工程化构建也没有内置支持。虽然可以通过在 easywebpack 中添加 new webpack.DllPlugin() 和 webpack.DllReference...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/cdn">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/17.jpg" class="responsive-img" alt="CDN 构建">
                            
                            <span class="card-title">CDN 构建</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                基本配置easywebpack 提供了 cdn 配置节点, 只需要配置 cdn 地址即可(cdn地址会覆盖publicPath地址).配置如下:easywebpack3 配置后 dev，test， prod 模式都会生效, 一般通过变量控制 cdn 节点的配置// ${app_root}/webpack.config.js module.exports = {   ......   cdn:UPLOAD_CDN ? { url: &#x27;http://xxx.cdn.com/public/&#x2...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/pwd">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/8.jpg" class="responsive-img" alt="PWA 支持">
                            
                            <span class="card-title">PWA 支持</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                service-worker 生成easywebpack 3.7.0 内置支持 service-worker.js 生成, 该功能是通过 service-worker-precache-webpack-plugin实现的。你可以通过如下方式开启， 默认禁用。//${app_root}/webpack.config.js module.exports = {   plugins:{     serviceworker:true   } } 开启后, easywebpack 会自动生成 service...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/typescript">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/5.jpg" class="responsive-img" alt="TypeScript">
                            
                            <span class="card-title">TypeScript</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                TypeScript 构建支持在用 TypeScript 编写 Vue 应用时， Vue 里面的 TypeScript 代码建议不要写在 Vue 文件里面，请以单独 ts 文件存放 TypeScript 代码。目前测试发现与 thread-loader 一起使用是有问题的。easywebpac...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/cssmodule">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/1.jpg" class="responsive-img" alt="Css Module">
                            
                            <span class="card-title">Css Module</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywepack4easywebpack4 默认提供 /\.module\.(css|less|scss|stylus)/  的文件规范的 CSS Module 特性，把 css module 的样式文件改成 /\.module\.(css|less|scss|stylus)/  规范，这...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/wb66pe">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/20.jpg" class="responsive-img" alt="静态资源">
                            
                            <span class="card-title">静态资源</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                import 方式引入在组件中直接 import js 和 css 公共文件, 这种引入会进行 Webpack 编译，比如压缩import  &#x27;asset/css/global.css&#x27; import  &#x27;asset/js/common.js&#x27; 文件拷贝模式借助 copy-webpack-plugin  进行文件拷贝，copy 插件已在 easywebpack@4.8.5 内置支持，然后页面通过 link  标签引入。注意拷贝的文件不会压缩和hash...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/babel">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/17.jpg" class="responsive-img" alt="Babel 配置">
                            
                            <span class="card-title">Babel 配置</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                Babel 版本说明easywebpack 体系目前内置 Babel 为 6 ，因涉及底层改动以及兼容等问题，为了保证现有已经运行项目的稳定性，暂还没有从框架层进行内置修改，目前提供两种方式进行升级 Babel 7。方式一：使用 @easy-team 插件依赖为了更方便升级 Babel7, 同...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/babel7">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/2.jpg" class="responsive-img" alt="Babel 升级">
                            
                            <span class="card-title">Babel 升级</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack 体系目前内置 Babel 为 6 ，因涉及底层改动以及兼容性等问题，为了保证现有已经运行项目的稳定性，暂还没有从框架层进行内置修改，目前提供两种方式进行升级 Babel 7。方式一：基于 easy-team 插件模式 Babel 快速升级方案为了更方便升级 Babel7...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/rpd7gu">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/21.jpg" class="responsive-img" alt="构建速度">
                            
                            <span class="card-title">构建速度</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                检测构建速度最新的 easywebpack-cli@4.0.0 可以通过 easy build --speed  检测 Webpack 各 loader 和 plugin 处理耗时。DLL 公共提取Webpack 通过 DLLPlugin 和 DLLReferencePlugin 可以实现公共类库的单独提取，能极大大提升了构建的速度.只需要在 webpack.config.js 文件添加 dll 节点配置即可完成 dll 整个流程。module.exports = {   dll:[&#x27;vue...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/pdwchd">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/22.jpg" class="responsive-img" alt="构建大小">
                            
                            <span class="card-title">构建大小</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack-cli 构建大小分析在项目开发时， 当页面构建的文件太大, 我们可以直接通过 cli 提供功能进行构建大小分析通过 -s 参数启动构建大小分析工具, 支持 analyzer(webpack-bundle-analyzer) 和 stats(stats-webpack-plugin) , 默认用 analyzer 插件。如果运行时, 提示安装缺少插件，请先安装依赖开发模式分析easy build -s  测试模式分析, 移除开发辅助代码easy build test -s...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/abtuv0">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/23.jpg" class="responsive-img" alt="基础配置">
                            
                            <span class="card-title">基础配置</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                在使用相关方案时, 请在项目中添加 babel  和 postcss  基础配置文件添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置，以下仅仅是举例：{   &quot;presets&quot;: [[&quot;env&quot;,{ &quot;modules&quot;: false }]],   &quot;plugins&quot;: [     &quot;transform-object-rest-spread&quot...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/vue">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/5.jpg" class="responsive-img" alt="Vue 项目构建">
                            
                            <span class="card-title">Vue 项目构建</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                Webpack  原始配置编写// webpack.config.js const easywebpack = require(&#x27;easywebpack-vue&#x27;); const webpack = easywebpack.webpack; const merge = easywebpack.merge; const env = process.env.BUILD_ENV; const baseWebpackConfig = easywebpack.getWebpackConfig...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/react">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/4.jpg" class="responsive-img" alt="React 项目构建">
                            
                            <span class="card-title">React 项目构建</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                Webpack  原始配置编写// webpack.config.js const easywebpack = require(&#x27;easywebpack-react&#x27;); const webpack = easywebpack.webpack; const merge = easywebpack.merge; const env = process.env.BUILD_ENV; const baseWebpackConfig = easywebpack.getWebpackConfig...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/vue-single">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/21.jpg" class="responsive-img" alt="Vue 单页面举例">
                            
                            <span class="card-title">Vue 单页面举例</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack-vue 构建单页面应用Vue + Vuex + Vue-Router 基本实现router/index.js 实现// router/index.js import Vue from &#x27;vue&#x27;; import VueRouter from &#x27;vue-router&#x27;; import ListView from &#x27;./list&#x27;; import DetailView from &#x27;./detail&#x2...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/mgzlq5">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/6.jpg" class="responsive-img" alt="Vue 多页面举例">
                            
                            <span class="card-title">Vue 多页面举例</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                基于 easywebpack-cli 模式构建Vue前端渲染项目一. 全局安装 easywebpack-cli 插件npm i easywebpack-cli  -g 安装成功以后, 就可以在命令行中使用 easy 或 easywebpack 命令, 比如 easy build, easy server, easy print 等二. 添加 webpack.config.js 配置在项目根目录添加 webpack.config.js 文件, 添加如下配置const path = require(&#x2...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/in6n2r">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/0.jpg" class="responsive-img" alt="JS 文件打包">
                            
                            <span class="card-title">JS 文件打包</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                我们经常会遇到单独对 JS 打包的场景，比如 es6 写的 npm 包需要构建成 es5 模式.  easywebpack 也提供了对应的解决方案： easywebpack-js基于 easywebpack-js 构建配置编写// build/index.js const easywebpack = require(&#x27;easywebpack-js&#x27;); const config = {   env: process.env.BUILD_ENV,   entry: {     &#x2...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/vue_project">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/1.jpg" class="responsive-img" alt="Vue 工程方案">
                            
                            <span class="card-title">Vue 工程方案</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                安装 easywebpack-cli 工具npm install easywebpack-cli -g添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置，以下仅仅是举例. 详细配置见：https://www.yuque.com/easy-team...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/react_project">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/10.jpg" class="responsive-img" alt="React 工程方案">
                            
                            <span class="card-title">React 工程方案</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                安装 easywebpack-cli 工具npm install easywebpack-cli -g添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置，以下仅仅是举例. 详细配置见：https://www.yuque.com/easy-team...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/html_project">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/2.jpg" class="responsive-img" alt="HTML 工程方案">
                            
                            <span class="card-title">HTML 工程方案</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack-html  纯静态页面构建解决方案支持纯静态页面构建支持 nunjucks 模版方式构建如何利用 easywebpack-cli工具快速获得一个骨架项目使用easy-cli你将得到一个具备以下能力的骨架项目:基于Nunjucks模版引擎的模版项目。Why? 借助模版引擎...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/js_project">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/18.jpg" class="responsive-img" alt="JS 打包工程方案">
                            
                            <span class="card-title">JS 打包工程方案</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                我们经常会遇到单独对 JS 打包的场景，比如 es6 写的 npm 包需要构建成 es5 模式.  easywebpack 也提供了对应的解决方案： easywebpack-js基于 easywebpack-js 构建配置编写// build/index.js const easywebpac...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/weex_project">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/12.jpg" class="responsive-img" alt="Weex 工程方案">
                            
                            <span class="card-title">Weex 工程方案</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack-weex 基于 easywebpack 的 Weex Native 和 Weex Web 打包构建解决方案.安装$ npm i easywebpack-weex --save-dev使用const weex = require('easywebpack-weex'); ...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/version">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/8.jpg" class="responsive-img" alt="版本历史">
                            
                            <span class="card-title">版本历史</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                easywebpack 版本发布说明easywebpack4 -&gt; Webpack4支持 Webpack 4 插件版本easywebpack: ^4.x.xeasywebpack-cli: ^3.x.xeasywebpack-vue: ^4.x.xeasywebpack-react: ^4.x.xeasywebpack-html: ^4.x.xeasywebpack-js: ^4.x.xegg-webpack: ^4.x.xwebpack-tool: ^4.x.xwebpack-manifest...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/upgrade">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/0.jpg" class="responsive-img" alt="升级指南">
                            
                            <span class="card-title">升级指南</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                Webpack 3 到 Webpack 4 经过重大更新，对应 easwebpack3 到 easywebpack4 也有相对性的更新，主要包括以下3点：Webpack 版本升级导致的配置优化和优化修改easywebpack 新特性支持和配置简化easywebpack 遗留问题修复以及去掉历史兼容 ...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/v4">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/16.jpg" class="responsive-img" alt="更新历史">
                            
                            <span class="card-title">更新历史</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                方案说明Webpack4插件版本easywebpack: ^4.x.xeasywebpack-cli: ^4.x.xeasywebpack-vue: ^4.x.xeasywebpack-react: ^4.x.xeasywebpack-html: ^4.x.xeasywebpack-js: ^...
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/open">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/1.jpg" class="responsive-img" alt="社区作品">
                            
                            <span class="card-title">社区作品</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                Egg + Vue 作品/egg-vue/open
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="/easywebpack/rlm0ki">
                        <div class="card-image">
                            
                            
                            <img src="/medias/featureimages/0.jpg" class="responsive-img" alt="交流反馈">
                            
                            <span class="card-title">交流反馈</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            
                                欢迎有兴趣的开发者参与！邮箱 hubcarl@126.comGitHubhttps://github.com/hubcarl知乎https://zhuanlan.zhihu.com/easywebpackQQ群有问题可以直接在在语雀评论回复(^_^)
                            
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2019-11-02
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-user fa-fw"></i>
                                sky
                                
                            </span>
                        </div>
                    </div>

                    
                </div>
            </div>
            
        </div>
    </article>

</main>
    

    

    <footer class="page-footer bg-color">
    <div class="container row center-align">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            <span id="year">年份</span>
            <a href="https://easy-team.github.io" target="_blank">sky</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/easy-team" target="_blank">Matery</a>
            <br>
            
            &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                class="white-color">106.5k</span>&nbsp;字
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
            
            <br>
            
            <span id="sitetime">载入运行时间...</span>
            <script>
                function siteTime() {
                    window.setTimeout("siteTime()", 1000);
                    var seconds = 1000;
                    var minutes = seconds * 60;
                    var hours = minutes * 60;
                    var days = hours * 24;
                    var years = days * 365;
                    var today = new Date();
                    var startYear = "2019";
                    var startMonth = "10";
                    var startDate = "20";
                    var startHour = "0";
                    var startMinute = "0";
                    var startSecond = "0";
                    var todayYear = today.getFullYear();
                    var todayMonth = today.getMonth() + 1;
                    var todayDate = today.getDate();
                    var todayHour = today.getHours();
                    var todayMinute = today.getMinutes();
                    var todaySecond = today.getSeconds();
                    var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                    var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                    var diff = t2 - t1;
                    var diffYears = Math.floor(diff / years);
                    var diffDays = Math.floor((diff / days) - diffYears * 365);
                    var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                    var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                        minutes);
                    var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                        diffMinutes * minutes) / seconds);
                    if (startYear == todayYear) {
                        document.getElementById("year").innerHTML = todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours +
                            " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    } else {
                        document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays +
                            " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    }
                }
                setInterval(siteTime, 1000);
            </script>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/hubcarl" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:hubcarl@126.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=433207205" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 433207205" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>



    <a href="https://weibo.com/hubcarl" class="tooltipped" target="_blank" data-tooltip="关注我的微博: https://weibo.com/hubcarl" data-position="top" data-delay="50">
        <i class="fab fa-weibo"></i>
    </a>



    <a href="https://zhuanlan.zhihu.com/easywebpack" class="tooltipped" target="_blank" data-tooltip="关注我的知乎: https://zhuanlan.zhihu.com/easywebpack" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">知</i>
    </a>



    <a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>

</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;Search</span>
            <input type="search" id="searchInput" name="s" placeholder="Please enter a search keyword"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc("/" + "search.xml", 'searchInput', 'searchResult');
});
</script>
    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    

    <!-- Global site tag (gtag.js) - Google Analytics -->


    <!-- Baidu Analytics -->


    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        bp.async = true;
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    
    <script async src="/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    

    

    
    <script type="text/javascript" src="/libs/background/ribbon-dynamic.js" async="async"></script>
    
    
    
    <script src="/libs/instantpage/instantpage.js" type="module"></script>
    

</body>

</html>
